import * as React from 'react';
import { Button, Icon, Input, message, Upload } from 'antd';
import styles from './styles/UploadPanel.less';
import { UploadFile } from 'antd/es/upload/interface';

export interface UploadPanelProps {
  onSuccess: () => void;
}

export interface UploadPanelState {
  name: string;
  attachments: UploadFile[];
}

interface FieldProps {
  required: boolean;
  label: string;
  children: React.ReactNode;
}

const Field = (props: FieldProps) => {
  const { label, required, children } = props;
  return (
    <div className={styles.field}>
      <div className={styles.label}>
        {required && <span className={styles.required}>*</span>}
        <label className={styles.text}>{label}</label>
      </div>
      <div className={styles.separator}>:</div>
      <div className={styles.value}>{children}</div>
    </div>
  );
};

class UploadPanel extends React.Component<UploadPanelProps, UploadPanelState> {
  public static propTypes = {};
  public static defaultProps = {};
  public state: UploadPanelState = {
    name: '',
    attachments: [],
  };

  render() {
    const { name, attachments } = this.state;
    return (
      <div>
        <div>
          <Field required label="名称">
            <Input
              placeholder="请输入附件名称"
              value={name}
              onChange={({ target: { value } }) => this.handleNameChange(value)}
            />
          </Field>
          <Field required label="附件">
            <Upload
              multiple={false}
              onRemove={(file) => {
                this.setState((state) => {
                  const index = state.attachments.indexOf(file);
                  const newFileList = state.attachments.slice();
                  newFileList.splice(index, 1);
                  return {
                    attachments: newFileList,
                  };
                });
              }}
              beforeUpload={(file) => {
                this.setState((state) => ({
                  attachments: [...state.attachments, file],
                }));
                return false;
              }}
              fileList={attachments}
            >
              <Button>
                <Icon type="to-top" style={{ marginRight: 5 }} />
                请上传文件
              </Button>
            </Upload>
          </Field>
          <div className={styles.btnLine}>
            <Button type={'primary'} onClick={this.handleAddClick}>
              添加
            </Button>
            <Button style={{ marginLeft: 10 }} onClick={this.handleCancelClick}>
              取消
            </Button>
          </div>
        </div>
      </div>
    );
  }

  private handleAddClick = () => {
    const { name, attachments } = this.state;
    if (name.trim() === '') {
      message.info('附件名称不能为空');
      return;
    }
    if (attachments.length < 1) {
      message.info('您还没有选择附件');
      return;
    }
    // name
    // attachments[0]
    const params = {
      name,
      attachment: attachments[0],
    };
    console.log(params);
    // 上传逻辑
    // 调用 service
    //
    this.props.onSuccess();
  };
  private handleCancelClick = () => {};

  private handleNameChange(value: string) {
    this.setState({ name: value });
  }
}

export default UploadPanel;
